<template>
    <div class="company">
        <Header></Header>
        <div class="content">
            <div class="title">
                <p>公司资料</p>
            </div>
            <ul class="info-list">
                <li>
                    <span>公司名称</span>
                    <input type="text" ref="companyName" v-model="companyInfo.companyName" :class="{edit: isEdit}"
                           :readonly="!isEdit">
                </li>
                <li>
                    <span>公司简介</span>
                    <input type="text" v-model="companyInfo.companyIntroduce" class="intro" :class="{edit: isEdit}"
                           :readonly="!isEdit">
                </li>
                <li>
                    <span>行业类型</span>
                    <el-select v-model="companyInfo.companyIndustry" :disabled="!isEdit" placeholder="请选择">
                        <el-option
                            v-for="item in industryType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <span>所属地区</span>
                    <el-cascader
                        :disabled="!isEdit"
                        :options="area"
                        :props="props"
                        :placeholder="areaPh"
                        v-model="areaVal"
                        @active-item-change="handleItemChange"
                        @change="handleChange">
                    </el-cascader>
                </li>
                <li>
                    <span>邮编</span>
                    <input type="text" v-model="companyInfo.postcode" :class="{edit: isEdit}" :readonly="!isEdit">
                </li>
                <li>
                    <span>联系电话</span>
                    <input type="text" v-model="companyInfo.tel" :class="{edit: isEdit}" :readonly="!isEdit">
                </li>
                <li>
                    <span>传真</span>
                    <input type="text" v-model="companyInfo.fax" :class="{edit: isEdit}" :readonly="!isEdit">
                </li>
            </ul>
            <p class="btns">
                <span class="edit-btn" v-if="!isEdit">
                    <el-button type="primary" @click="handleEdit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                </span>
                <span class="edit-btn" v-if="isEdit">
                    <el-button type="primary" @click="handleConfirm">确认</el-button>
                </span>
                <span class="edit-btn" v-if="isEdit">
                    <el-button type="primary" @click="handleCancel">取消</el-button>
                </span>
            </p>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/header'
    import jsonp from 'jsonp'

    export default {
        name: "company",
        components: {
            Header
        },
        data() {
            return {
                companyInfo: {
                    companyName: '',
                    companyIntroduce: '',
                    companyIndustry: '', // 行业类型选中值
                    companyArea: "", // 区域选中值
                    postcode: '',
                    tel: '',
                    fax: ''
                },
                // 行业类型列表
                industryType: [
                    {
                        value: 'Technology',
                        label: '科技'
                    }, {
                        value: 'Education',
                        label: '教育'
                    }, {
                        value: 'ForeignTrade',
                        label: '外贸'
                    }, {
                        value: 'Finance',
                        label: '金融'
                    }, {
                        value: 'Internet',
                        label: '互联网'
                    }
                ],
                // 区域列表
                area: [],
                areaPh: "请选择",
                areaVal: [],
                props: {
                    label: 'name',
                    value: 'name',
                    children: 'districts'
                },
                // 控制是否可编辑
                isEdit: false,
                // 保存编辑前的内容
                beforeEditVal: null,
            }
        },
        methods: {
            // 所属地区
            handleChange(value) {
                this.companyInfo.companyArea = value.join('/')
            },
            // 动态加载城市
            handleItemChange(val) {
                let params = `&keywords=${val[val.length - 1]}&subdistrict=1&extensions=base`
                this.getAreaList(params, val)
            },
            handleEdit() {
                this.isEdit = true
                this.beforeEditVal = JSON.parse(JSON.stringify(this.companyInfo))
                this.$refs.companyName.focus()
            },
            handleConfirm() {
                this.$ajax
                    .accountData
                    .updateCompany(this.companyInfo)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.isEdit = false
                            this.$message.success(this.$msgDictionary.update.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            handleCancel() {
                this.isEdit = false
                this.companyInfo = this.beforeEditVal
                this.areaVal = []
            },
            //获取城市列表
            getAreaList(params, adcodeArr) {
                params = (params === undefined || params === null) ? "" : params
                //获取本地区域json文件
                jsonp("http://restapi.amap.com/v3/config/district?key=130a119d7dc9943604fb695ea1235b5a" + params, null, (err, data) => {
                    if (err) {
                        this.$message.error(this.$msgDictionary.serviceException)
                    } else {
                        if (data.status === '1') {
                            /**
                             * data.districts代表下级区域列表
                             */
                            if (data.districts) {
                                /**
                                 * params 等于 空字符串 代表第一次请求，获取省级列表
                                 * 不等于 空字符串 代表能根据当前点击区域代码获取其下级区域列表
                                 */
                                if (params !== "") {
                                    this.area.map((city) => {
                                        /**
                                         * adcodeArr.length等于1，代表只点击了省，获取数据为下级市
                                         */
                                        if (adcodeArr.length === 1) {
                                            if (adcodeArr[0] === city.name) {
                                                if (city.name === '澳门特别行政区' || city.name === "香港特别行政区") {
                                                    data.districts[0].districts.map((county) => {
                                                        delete county.districts
                                                    })
                                                }
                                                city.districts = data.districts[0].districts
                                            }
                                            /**
                                             * adcodeArr.length等于2，代表只点击了市，获取数据为下级区县
                                             * 此时做两件事
                                             * 1.将当前获取的下级区县数据放到对应的市里面去
                                             * 2.去除县级对象中的districts字段，使其不再显示下级
                                             */
                                        } else if (adcodeArr.length === 2 && city.districts.length > 0) {
                                            city.districts.map((county) => {
                                                if (adcodeArr[1] === county.name) {
                                                    data.districts[0].districts.map((val) => {
                                                        delete val.districts
                                                    })
                                                    county.districts = data.districts[0].districts
                                                }
                                            })
                                        }
                                    })
                                } else {
                                    this.area = data.districts[0].districts
                                }
                            }
                        } else {
                            this.$message.error(data.info)
                        }
                    }
                })
            }
        },
        mounted() {
            this.getAreaList()
            let userId = ''
            if (localStorage.getItem("user")) {
                userId = JSON.parse(localStorage.getItem("user")).userId
            }
            this.$ajax
                .accountData
                .getCompany(userId)
                .then((res) => {
                    let result = res.data
                    if (result.code === 200) {
                        if(result.result){
                            this.companyInfo = result.result
                            // 获取到公司数据后，多公司区域进行处理
                            let area = this.companyInfo.companyArea
                            if (area !== "" && area !== undefined && area !== null) {
                                this.areaPh = area
                            }
                        }
                    } else {
                        this.$message.error(result.msg)
                    }
                }, () => {
                    this.$message.error(this.$msgDictionary.serviceException)
                })
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .content {
        height: 90vh;
        box-sizing: border-box;
        padding: 0.6rem 0;
        .title {
            padding-left: 1rem;
            p {
                border-left: 0.05rem solid $strong_red;
                height: 0.3rem;
                line-height: 0.3rem;
                padding-left: 0.3rem;
                font-size: 0.20rem;
            }
        }
        .info-list {
            padding-left: 1rem;
            padding-top: 0.3rem;
            li {
                height: 0.6rem;
                line-height: 0.6rem;
                span {
                    &:first-child {
                        display: inline-block;
                        width: 1rem;
                    }
                }
                input {
                    width: 5rem;
                    height: 0.4rem;
                    padding: 0 0.1rem;
                    border: 1px solid transparent;
                    border-radius: 0.04rem;
                    outline: none;
                    color: $font_color;
                    font-size: 0.16rem;
                    &.intro {
                        /*width: 10rem;*/
                    }
                    &.edit {
                        border-color: #C1C5CD;
                    }
                }
            }
        }
        .btns {
            padding-left: 1rem;
            padding-top: 0.2rem;
        }
    }
</style>
